<script>
  export default {
    data(){
      return{
        loading:true, // 加载
        stockList:{
          stockNum:'', // 采购计划编号
          stockName: '', // 采购计划名称
          author:'', // 编制人
          budget:'', // 预算金额
          stockDate: '', // 采购计划编制时间(不添加到数据库中)
          company: '', // 公司名称(多表查询)
          ordersList:[],// 所选中需求列表
          stockType:'C000-1',
          supplierList:[], // 供应商列表
        },
        date: '', // 采购计划编号
        current: '', // 当前时间
        currentSerialNumber: 1, // 初始流水号从 1 开始
        stockTypeValue: [
          {value:'C000-1',label:'公开求价'},
          {value:'C000-2',label:'定向询价'},
        ]
      }
    },
    mounted(){
      //获得参数列表
      const ids = this.$route.query.ids;
      console.log(ids);
      // 调用方法
      this.getOrders(ids);
      // 调用获取当前时间方法
      this.generateSerialNumber();
      console.log(this.date);
      this.stockList.stockNum = this.date;
      localStorage.setItem('currentSerialNumber',this.currentSerialNumber);
    },
    methods:{
      getOrders(val){
        this.$http({
          url: this.$http.adornUrl("/purchase/stock/findOrders"),
          method: 'get',
          params: {
            "ids":val
          }
        }).then(resp => {
          // console.log(resp);
          this.stockList.ordersList =  resp.ordersSupplier.ordersList;
          this.stockList.supplierList = resp.ordersSupplier.supplierList;
          this.stockList.stockDate = this.current;
          console.log(this.stockList.supplierList)
          this.loading = false;
        });
      },
      getCurrent(){
        // 创建一个Date对象表示当前日期
        let now = new Date();
        // 获取年月日部分，并转换成字符串
        let year = now.getFullYear();
        let month = (now.getMonth() + 1).toString().padStart(2,'0');//月份从0开始
        let day = now.getDate().toString().padStart(2,'0');
        //组合年月日为字符串
        this.current = `${year}-${month}-${day}`;
      },
      generateSerialNumber() {
        // 使用 padStart 方法确保流水号的宽度为 5，不足的部分在前面补零
        this.currentSerialNumber = localStorage.getItem("currentSerialNumber")
        this.currentSerialNumber++; // 递增流水号
        const serialNumber = String(this.currentSerialNumber).padStart(5, '0');// 生成的流水号
        this.getCurrent();
        this.date = '100' + this.current.split("-").join("") + serialNumber;
      },
      goBack(){
        this.$router.go(-1);
      },
      dataFormSubmit(){
        console.log(this.stockList);
        this.$http({
          url: this.$http.adornUrl('/purchase/stock/saveStock'),
          method: 'post',
          data: this.$http.adornData(
            this.stockList,
          )
        }).then(resp => {
          console.log(resp);
        }).catch();
      }
    },
  }
</script>

<template>
  <div>
    <!--空骨架-->
    <template>
      <el-skeleton :rows="7"
                   :animated="true"
                   :loading="loading"
                   :throttle="500"/>
    </template>
    <div v-if="!loading">
      <div class="div1" >
        <el-descriptions title="编制采购计划" :column="2" border>
          <el-descriptions-item label="采购计划编号">
            {{stockList.stockNum}}
          </el-descriptions-item>
          <el-descriptions-item label="采购计划名称">
            <el-input v-model="stockList.stockName" placeholder="采购计划名称"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="公司名称">
            {{stockList.company}}
          </el-descriptions-item>
          <el-descriptions-item label="编制人">
            <el-input v-model="stockList.author" placeholder="编制人"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="预算金额(元)">
            <el-input v-model="stockList.budget" placeholder="预算金额"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="采购计划编制时间">
            {{stockList.stockDate}}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template>
        <el-table
          :data="stockList.ordersList"
          style="width: 100%"
          stripe
          border>
          <el-table-column
            align="center"
            prop="id"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="物资编码"
            width="120">
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="物资名称"
            width="190">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="数量"
            width="150">
          </el-table-column>
          <el-table-column
            prop="measureUnit"
            label="计量单位"
            width="100">
          </el-table-column>
          <el-table-column
            prop="startDate"
            label="交货期"
            width="150">
          </el-table-column>
          <el-table-column
            prop=""
            label="协议价格"
            width="140">
          </el-table-column>
          <el-table-column
            prop="sumPrice"
            label="预算总金额"
            width="140">
          </el-table-column>
          <el-table-column
            prop=""
            label="计划价(元/不含税)">
          </el-table-column>
        </el-table>
      </template>

      <div class="div2">
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item label="采购方式">
            <el-select v-model="stockList.stockType" placeholder="请选择">
               <el-option
                 v-for="item in stockTypeValue"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="满足条件的供应商列表">
            <el-tag v-for="tag in stockList.supplierList" :key="tag.company">
                {{tag.company}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="说明(400字以内)">
            <el-input
              type="textarea"
              :rows="4">
            </el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" @click="dataFormSubmit">提交</el-button>
      <!--      <el-button @click="reset">重置</el-button>-->
      <el-button @click="goBack">返回</el-button>

    </div>
  </div>
</template>

<style scoped lang="scss">
  ::v-deep .el-input .el-input__inner{
    width: 200px;
    border: none;
    outline: none;
    padding-left: 0;
  }
  ::v-deep .el-descriptions-row .el-descriptions-item__label{
    width: 150px;
  }
  //::v-deep .el-descriptions-row .el-descriptions-item__cell {
  //  width: 180px;
  //}

.div1 ::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
    width: 240px;
  }
.div2 ::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label{
    width: 200px;
}
.bottom{
  margin-top: 5px;
  text-align: right;
}
</style>
